<!--
* @FileDescription: 我的评价
* @Author: chenz
* @Date: 2021/4/21
* @LastEditors: 最后更新作者
* @LastEditTime: 最后更新时间
-->
<template>
	<view class="my-estimate">
		<view class="redios">
			<cl-radio-group v-model="changeVal" border>
				<cl-radio label="1">全部1111</cl-radio>
				<cl-radio label="2">有图12</cl-radio>
			</cl-radio-group>
		</view>
		<!-- 我的评价 -->
		<view class="box">
			<cl-scroller ref="scroller" @up="onUp" @down="onDown">
				<view class="item" v-for="(item, index) in datalist" :key="index">
					<!-- 头像 -->
					<view class="datalist-top">
						<image class="datalist-top-avartar" src="../../static/black.jpg" mode=""></image>
						<view class="datalist-top-username">11111</view>
						<view class="datalist-top-date">11111</view>
					</view>
					<!-- 描述 -->
					<view class="datalist-info">
						<text class="text">{{item.info}}</text>
					</view>
					<!-- 轮播 -->
					<view class="datalist-photos">
						<cl-swiper v-model="item.active" :list="item.list" type="chain"></cl-swiper>
					</view>
				</view>

				<cl-loadmore v-if="datalist.length > 0" :loading="loading"></cl-loadmore>
			</cl-scroller>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 选中的值
				changeVal: "1",
				list: [],
				datalist: [{
					avatar: "1111",
					username: "2222",
					date: "33333",
					info: "课程简介。。。。。课程简介。。。。。课程简介。。。。。课程简介。。。。。课程简介。。。。。课程简介。。。。。课程简介。。。。。课程简介。。。。。",
					list: [
						'https://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1604234049&t=27ea9e61604a7c1f659c452a7ef7b80d',
						'https://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1604234049&t=27ea9e61604a7c1f659c452a7ef7b80d',
						'https://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1604234049&t=27ea9e61604a7c1f659c452a7ef7b80d',
					],
					active: ""
				}],
			}
		},

		watch: {
			// 选中的值
			changeVal: function(changeVal) {
				console.log('changeVal', changeVal)
			},
			active: function(active) {
				console.log('active', active)
			},
		},
		methods: {

			// 上拉加载
			onUp() {
				this.loading = true;

				setTimeout(() => {
					this.datalist.push(...new Array(20).fill(1));
					this.loading = false;
				}, 1000);
			},

			// 下拉刷新
			onDown() {
				setTimeout(() => {
					this.datalist = new Array(20).fill(1);
					this.$refs["scroller"].end();
				}, 1000);
			},

			// 请求接口
			getData(data) {}
		}
	}
</script>

<style lang="scss" scoped>
	.my-estimate {
		height: 100%;
		padding: 20rpx;

		.redios {}

		.TaskList {
			height: 100%;
		}

		.box {
			height: 100%;

			.item {
				margin-top: 20rpx;

				.datalist-top {
					height: 80rpx;
					display: flex;
					align-items: center;

					.datalist-top-avartar {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}

					.datalist-top-username {
						flex: 1;
						font-size: 28rpx;
						padding-left: 20rpx;
						color: rgba(0, 0, 0, 0.68);
					}

					.datalist-top-date {
						flex: 1;
						font-size: 24rpx;
						text-align: right;
						color: $text-color;
					}
				}

				.datalist-info {
					height: 80rpx;

				}

				.datalist-photos {
					width: 100%;
				}
			}
		}
	}

	/deep/ .cl-radio {
		height: 64rpx;
	}

	/deep/ .swiper-item {
		width: 220rpx;
	}

	/deep/ .cl-radio.is-border.is-checked {
		border: 1rpx solid  $subject-bgc;
		background-color: $subject-bgc;
	}

	.text {
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
</style>
